<template>
    <!-- 主体可变化内容 -->
    <div class="main-content">
        <div class="main-content-center">
            <!-- 个人中心 -->
            <div class="main-content-left">
                <div class="userInfo">
                    <div class="topMes">
                        <img :src="userInfo.avatar" />
                        <div class="topMesTextBox">
                            <div class="niName">
                                {{ userInfo.nicheng }}
                            </div>
                            <div class="messId">
                                ID: {{ userInfo.identifier }}
                            </div>
                        </div>
                    </div>
                    <el-divider></el-divider>
                    <div class="schoolName">
                        {{ userInfo.school.school_name }}
                    </div>
                    <div class="bottomBox">
                        <div>{{ getgradeName(userInfo.grade) }}</div>
                        <div class="userHome" @click="toPerHome">进入主页></div>
                    </div>
                </div>
                <div class="userInfo-nav">
                    <ul>
                        <li
                            @click="
                                (userTabNab = item.userTabNab),
                                    (currentComponent = item.currentComponent)
                            "
                            :class="[
                                userTabNab == item.userTabNab
                                    ? 'liSelect'
                                    : 'liNoSelect'
                            ]"
                            v-for="(item, index) in personalCenterList"
                            :key="index"
                        >
                            {{ item.userTabNab }}
                        </li>
                    </ul>
                </div>
            </div>
            <div class="main-content-right-fix">
                <transition name="fade-transform" mode="out-in">
                    <component :is="currentComponent"></component>
                </transition>
            </div>
        </div>
    </div>
</template>

<script>
//通知页面
import NoticeList from "./components/noticeList/index";
import MyOrder from "./components/myOrder";
import SetUp from "./components/setUp/index";
import Member from "./components/member/index";
import PersonalTimetable from "./components/personalTimetable/index";
import SmartPay from "./components/smartPay/index";
import { mapGetters } from "vuex";
import util from "@/utils/utilsTools";
export default {
    components: {
        NoticeList,
        MyOrder,
        SetUp,
        PersonalTimetable,
        Member,
        SmartPay
    },
    computed: {
        ...mapGetters(["userInfo"])
    },
    props: {},
    data() {
        return {
            userTabNab: "会员权益",
            currentComponent: "Member",
            personalCenterList: [
                { userTabNab: "会员权益", currentComponent: "Member" },
                {
                    userTabNab: "个人课表",
                    currentComponent: "PersonalTimetable"
                },
                { userTabNab: "我的通知", currentComponent: "NoticeList" },
                { userTabNab: "我的智付", currentComponent: "SmartPay" },
                { userTabNab: "我的设置", currentComponent: "SetUp" }
            ]
            // personalCenterList: [
            //     { userTabNab: "我的课程", currentComponent: "myCourse" },
            //     { userTabNab: "我的作业", currentComponent: "" },
            //     {
            //         userTabNab: "同步练习",
            //         currentComponent: "synchronizedPractice"
            //     },
            //     { userTabNab: "我的班级", currentComponent: "myClass" },
            //     { userTabNab: "我的订单", currentComponent: "myOrder" },
            //     { userTabNab: "我的消息", currentComponent: "" },
            //     { userTabNab: "我的余额", currentComponent: "myBalance" },
            //     {
            //         userTabNab: "智学记录",
            //         currentComponent: "intellectualRecords"
            //     },
            //     { userTabNab: "退出登录", currentComponent: "" }
            // ]
        };
    },
    watch: {},
    beforeCreate() {
        // 生命周期钩子：组件实例刚被创建，组件属性计算之前，如 data 属性等
    },
    created() {
        // 生命周期钩子：组件实例创建完成，属性已绑定，但 DOM 还未生成，el 属性还不存在
        // 初始化渲染页面
    },
    beforeMount() {
        // 生命周期钩子：模板编译/挂载之前
    },
    mounted() {
        // 生命周期钩子：模板编译、挂载之后（此时不保证已在 document 中）
    },
    methods: {
        toPerHome() {
            this.$router.push("/personalCenter/personalHomepage");
        },
        getgradeName(val) {
            return util.getgradeName(val);
        }
    }
};
</script>

<style lang="scss" scoped>
.main-content-center {
    width: 100%;
    padding: 26px;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
}
/* 个人中心 */
.main-content-left {
    width: 328px;
    height: 100%;
    .userInfo {
        width: 100%;
        min-height: 207px;
        border-radius: 8px;
        background: #fff;
        padding: 30px;
        box-sizing: border-box;
    }
    .userInfo-nav {
        width: 328px;
        border-radius: 8px;
        background: #fff;
        margin-top: 30px;
        padding: 30px 0px;
    }
}
.userInfo {
    img {
        width: 80px;
        height: 80px;
        border-radius: 50%;
    }
    div {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: #6d7785;
    }
    .topMes {
        display: flex;
    }
    .topMesTextBox {
        margin-left: 20px;
    }
    .niName {
        font-size: 23px;
        font-weight: bold;
        margin-top: 5px;
    }
    .messId {
        font-size: 18px;
        margin-top: 15px;
        color: #c0c4cc;
    }
    .schoolName {
        font-size: 16px;
        font-weight: 600;
        margin-top: 15px;
    }
    .bottomBox {
        font-size: 15px;
        margin-top: 10px;
        display: flex;
        justify-content: space-between;
        line-height: 30px;
    }
    .userHome {
        font-size: 14px;
        color: #009688;
        cursor: pointer;
    }
}
.userInfo-nav {
    ul {
        padding-inline-start: 0px;
    }
    li {
        height: 60px;
        text-align: center;
        font-size: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #6d7785;
        cursor: pointer;
    }
}
.liNoSelect {
    color: #6d7785;
    background: #fff;
}
.liSelect {
    color: #018854 !important;
    background: #e6f7ff;
    width: 100%;
    &:after {
        position: relative;
        left: 122px;
        content: "";
        width: 3px;
        height: 100%;
        background: #018854;
    }
}
.main-content-right-fix {
    width: calc(100% - 328px);
    height: 100%;
    min-height: 764px;
}
//过渡动画
/* fade */
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.28s;
}

.fade-enter,
.fade-leave-active {
    opacity: 0;
}

/* fade-transform */
.fade-transform-leave-active,
.fade-transform-enter-active {
    transition: all 0.5s;
}

.fade-transform-enter {
    opacity: 0;
    transform: translateX(-30px);
}

.fade-transform-leave-to {
    opacity: 0;
    transform: translateX(30px);
}
</style>
